import {
    createApp
} from 'vue'

import App from './App.vue'

//导入路由
import router from './router/router.js'

//导入ElementPlus插件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

//导入api
import api from './api/index.js'
//导入request.js
import request from './utils/request.js'
//导入storage.js
import storage from './utils/storage.js'
//导入store.js
import store from './vuex/store.js'

const app = createApp(App)
//定义全局变量
app.provide("$api", api)
app.provide("$request", request)
app.provide("$storage", storage)

//导入ElementPlus图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

function checkRoute(path) {
    // router.getRoutes()  获得整个项目的路由地址
    // 使用route变量遍历像个项目的路由地址 如果遍历的路由地址和访问的路由地址相等
    // 则返回相等的路由信息
    return router.getRoutes().filter(route => route.path == path).length
}

function checkPermission() {
    //获得当前登录用户的token
    return store.state.userInfo.token
}
//给所有的路由地址添加路由守卫
router.beforeEach((to, from, next) => {
    if (to.path != '/login') {
        //如果用户访问的路由地址不是登录页面判断用户是否登录
        if (!checkPermission()) {
            //如果用户没有登录,跳转到登录页面
            next("/login")
        }
    }
    //判断当前用户访问的路由地址在整个项目的路由地址的范围之内
    if (checkRoute(to.path)) {
        //判断路由地址上是否配置meta.title元信息
        if (to.meta.title) {
            //如果配置了 页面上的标题就是meta.title值
            document.title = to.meta.title
        } else {
            //如果没有配置,页面上的标题就是 通用后台管理系统
            document.title = "通用后台管理系统"
        }
        next()
    } else { //如果用户访问的路由地址不在项目的路由地址的范围之内 跳转到404组件上
        next("/404")
    }
})


//使用路由
app.use(router)
//使用ElementPlus插件
app.use(ElementPlus, {
    //默认使用小图标
    size: 'small'
})
//使用vuex
app.use(store)

//创建动态指令:v-has
//判断用户是否拥有按钮权限,如果没有则隐藏按钮
app.directive('has', {
    mounted(el, binding) {
        //binding参数   能够获得v-has指令中绑定的值 
        //当前按钮中v-has指令中绑定的值（按钮的权限标识符）
        let value = binding.value
        //获得当前用户所拥有的所有的按钮的权限标识符
        let buttonPerms = storage.getItem('buttonPerms')
        //判断按钮的权限标识符是否在当前用户所拥有的按钮权限标识符中
        if (!buttonPerms.includes(value)) {
            //如果不在用户所拥有的按钮权限标识符中 将按钮隐藏
            el.style.display = "none"
        }
    }
})
app.mount('#app')